<style lang="scss" scoped>
	.content {

		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nav {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	.top {
		padding: 20rpx 0;
	}

	.search {
		width: 690rpx;
		height: 68rpx;
		background: #f4f5f7;
		border: 2rpx solid #f5f5f5;
		border-radius: 46rpx;
		margin: 0rpx auto;
		padding: 20rpx;

		.ipt {
			flex: 1;
		}
	}

	.footer {
		width: 100%;
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1px solid #cccccc;
		padding-left: 30rpx;
		padding-right: 30rpx;
		z-index: 100;
	}

	.box {
		width: 690rpx;
		padding: 30rpx 20rpx;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0rpx 32rpx 20rpx -20rpx #e6ebf2;
		margin-top: 30rpx;

		.line {
			width: 100%;
			height: 100rpx;
			border-top: 1px solid #eeeeee;

			.ipt {
				width: 500rpx;
				text-align: right;
			}
		}

		.line2 {
			width: 100%;
			border-top: 1px solid #eeeeee;
			align-items: flex-start;

			.des {
				width: 500rpx;
				text-align: justify;
			}
		}

		.sbtn {
			width: 184rpx;
			height: 64rpx;
			background: #fffefe;
			border: 2rpx solid #409eff;
			border-radius: 34rpx;
		}

		.imgboxs {
			width: 100%;
			flex-wrap: wrap;

			.imgbox {
				width: 148rpx;
				height: 148rpx;
				border: 2rpx solid #dee2ee;
				border-radius: 10rpx;
				position: relative;
				margin-right: 18rpx;

				.photo {
					width: 100%;
					height: 100%;

				}

				.close {
					position: absolute;
					width: 32rpx;
					height: 32rpx;
					right: -16rpx;
					top: -16rpx;
				}
			}

			.imgbox:nth-child(4n) {

				margin-right: 0rpx;
			}
		}
	}

	.btns {
		.btn {

			padding: 10rpx 30rpx;
			border: 2rpx solid #409eff;
			border-radius: 34rpx;
		}
	}

	.sbtn {
		width: 330rpx;
		height: 88rpx;
		border: 2rpx solid #dee2ee;
		border-radius: 46rpx;
		border: 2rpx solid #409eff;
	}

	.lbtn {
		width: 330rpx;
		height: 88rpx;
		margin-right: 0;
	}

	.tip {
		color: #98A5B3;
		padding: 0 30rpx;
		width: 100%;
	}

	.top {
		width: 100%;
		height: 170rpx;

		.ball {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: #dee2ee;
			font-size: 20rpx;
			margin-bottom: 10rpx;
		}

		.rowline {
			width: 130rpx;
			height: 4rpx;
			background: #dee2ee;
			border-radius: 4rpx;
			transform: translateY(-20rpx);
		}

		.blue {
			background: #409eff;
			color: white
		}

		.green {
			border: 2rpx solid #07c160;
			background-color: white;
			color: #07c160;
		}
	}
</style>

<template>
	<view class="content">
		<view class="top bgwhite center-flex">
			<view class="colum-flex">
				<view class="ball center-flex green">
					<u-icon name="checkbox-mark" size="30"></u-icon>
				</view>
				<view>基本信息</view>
			</view>
			<view class="rowline" style="background-color:#07c160 ;"></view>
			<view class="colum-flex">
				<view class="ball center-flex blue">
					2
				</view>
				<view>制定里程碑</view>
			</view>
			<view class="rowline"></view>
			<view class="colum-flex">
				<view class="ball center-flex">
					3
				</view>
				<view>制定计划</view>
			</view>

		</view>

		<view class="box" style="padding-bottom: 0;" v-for="item,index in work" :key="index" :style="item.quoteId==1?'background:#dee2ee;':''">
			<view class="p-bottom30 between-flex">
				<view class="textColor f28 bold ">里程碑{{item.indexNum}}</view>
				<view v-if="work.length>1" class="align-flex gray" @click="del(index,item)">
					<image style="width:30rpx;height:30rpx;margin-right: 10rpx;" src="../../static/images/del.png"
						mode=""></image>删除
				</view>
			</view>
			<view class="line between-flex f28">
				<view class="gray"><span class="red">*</span>名称</view>
				<input class="ipt" type="text" @blur="edit(item)" :disabled="item.quoteId==1" v-model="work[index].name" maxlength="50" placeholder="请输入" />
			</view>

			<view class="line between-flex f28">
				<view class="gray"><span class="red">*</span>责任人</view>
				<view v-if="item.quoteId==0" class="blue" @click="personIndex=index;$navTo(PagesCourseRouterConfig.ChoosePerson+'?type=3')">
					<span v-if="item.principal">{{item.principal | user}}</span>
					<span v-else>请选择</span>
					<u-icon name='arrow-right'></u-icon>
				</view>
				<view v-else>
					{{item.principal | user}}
				</view>
			</view>
			<view class="line2 between-flex f28 p-top20">
				<view class="gray">详细描述</view>
				<textarea @blur="edit(item)" class="des textColor" :disabled="item.quoteId==1" style="height:120rpx;" maxlength="200" v-model="work[index].remark"
					placeholder="请输入项目描述" />

			</view>
		</view>


		<view class="space"></view>
		<view class="footer between-flex paddingBottom">
			<view class="sbtn center-flex blue bold" @click="add">新增里程碑</view>
			<view class="lbtn" @click="submit">下一步</view>
		</view>

	</view>
</template>

<script>
		import PagesCourseRouterConfig from '@/pagesCourse/routerConfig.js'
	import PagesProjectRouterConfig from  '@/pagesProject/routerConfig.js'
	export default {
		data() {
			return {
				PagesCourseRouterConfig,
				PagesProjectRouterConfig,
				head: this.$head,
				project: uni.getStorageSync('creatProjectInfo'),
				work: [],
				personIndex: 0 //选择人员的索引

			}
		},
		onLoad() {
			this.getlist()
			uni.$on('choosePerson2', (data) => {
				this.work[this.personIndex].principal = data.value
				this.edit(this.work[this.personIndex])
			})
		},
		beforeDestroy() {
			uni.$off('choosePerson2')
		},
		methods: {
			getlist() {
				this.$pop.ajaxPost('/busItemInfo/getWorkList', {
					itemCode: this.project.itemCode
				}).then(res => {
					if (res.body.length == 0) {
						this.add()
					}else{
						this.work=[]
						var list = res.body
						list.forEach(item=>{
							if(item.parentId==0){
								this.work.push(item)
							}
						})
						
					}
				})
			},
			submit() {
				var flag = true
				for (let i = 0; i < this.work.length; i++) {
					if (!this.work[i].name) {
						this.$msg('里程碑' + (i + 1) + '未输入名称')
						flag = false
						break
					} else if (!this.work[i].principal) {
						this.$msg('里程碑' + (i + 1) + '未选择责任人')
						flag = false
						break
					}
				}
				if(flag){
					setTimeout(()=>{
						this.$navTo(this.PagesProjectRouterConfig.Addchildwork)
					},500)
					
				}


			},
			add() {
				this.$pop.ajaxPost('/busItemWork/save', {
					itemCode: this.project.itemCode,
					name: '',
					remark: '',
					principal: 0
				}).then(res => {
					if (res.code == 0) {
						this.getlist()
						setTimeout(() => {
							uni.pageScrollTo({
								scrollTop: 999999999
							})
						}, 200)
					} else {
						this.$msg(res.msg)
					}

				})


			},
			edit(item){
				this.$pop.ajaxPost('/busItemWork/update', {
					id:item.id,
					itemCode: this.project.itemCode,
					name:item.name,
					remark:item.remark,
					principal: item.principal?item.principal:0
				}).then(res => {
					
				})
			},
			del(index,item) {
				this.$pop.ajaxPost('/busItemWork/delete', {
					id:item.id
				}).then(res => {
					this.work.splice(index, 1)
				})
				
				
			}

		}
	}
</script>
